<!-- 登录 -->
<template>
  <view class="login_wrap">
    <view class="login_text">
      <image
        class="login-logo"
        src="https://minio.wskjwl.com/uipicture/login_logo.png"
        mode=""
      ></image>
      <view class="listTop-box">
        <view
          v-for="(item, index) in listTop"
          :key="index"
          class="item-box"
          :class="{
            'active-tabs': current == 0 && index == 0,
            'default-tabs': current == 0 && index == 1,
            'active-tabs-180': current == 1 && index == 0,
            'default-tabs-180': current == 0 && index == 1,
          }"
          @click="change(index)"
        >
          <view>
            {{ item.name }}
          </view>
        </view>
      </view>
      <template v-if="current === 0">
        <u-form :model="form" ref="uForm">
          <view class="user">
            <image
              src="../../static/my/yonghu.png"
              style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
            ></image>
            <u-input
              style="flex: 1"
              type="number"
              name="user_name"
              placeholder="请输入手机号"
              v-model="form.username"
              cursor-spacing="100"
              maxlength="11"
            />
          </view>
          <view class="user_pwd">
            <image
              src="../../static/my/mima.png"
              style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
            ></image>
            <u-input
              style="flex: 1"
              type="password"
              name="pwd"
              placeholder="请输入您的密码"
              v-model="form.pwd"
              cursor-spacing="50"
            />
          </view>
        </u-form>
        <view class="checkbox-big-box">
          <!-- <view class="register" @click="showForgotpassword">忘记密码 </view> -->
          <view></view>
          <u-checkbox-group>
            <u-checkbox
              @change="checkboxChange"
              v-model="item.checked"
              v-for="(item, index) in list"
              :key="index"
              :name="item.name"
              size="30"
              >{{ item.name }}</u-checkbox
            >
          </u-checkbox-group>
        </view>
        <view class="login_btn_wrap">
          <view>
            <button
              class="cu-btn block bg-blue margin-tb-sm lg round login_btn"
              @click="submit"
            >
              登录
            </button>
          </view>
          <view class="checkbox-big-box checkout1-big-box checkout1-box">
            <view @click="showForgotpassword">忘记密码 </view>
            <view @click="showRegister">用户注册</view>
          </view>
        </view>
      </template>
      <template v-if="current === 1">
        <u-form :model="form" ref="uForm">
          <view class="user">
            <image
              src="../../static/my/yonghu.png"
              style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
            ></image>
            <u-input
              style="flex: 1"
              type="number"
              name="user_name"
              placeholder="请输入手机号"
              v-model="form.username"
              cursor-spacing="100"
              maxlength="11"
            />
          </view>
          <view class="row-box">
            <view class="user_pwd">
              <image
                src="../../static/my/yanzhengma.png"
                style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
              ></image>
              <u-input
                style="flex: 1"
                type="number"
                name="user_name"
                placeholder="请输入验证码"
                v-model="form.verificationCode"
                cursor-spacing="50"
              />
            </view>
            <view class="register" @click="getCode">
              <view v-show="showCode">获取验证码</view>
              <view v-show="!showCode">{{ count }}秒</view>
            </view>
          </view>
        </u-form>
        <view class="login_btn_wrap">
          <view>
            <button
              class="cu-btn block bg-blue margin-tb-sm lg round login_btn"
              @click="submit"
            >
              登录
            </button>
          </view>
        </view>
      </template>
      <view class="checkout1-big-box">
        <u-checkbox-group>
          <u-checkbox @change="checkboxChange1" v-model="checkout1" size="30">
            <view class="checkout1-box">
              勾选代表您已同意 《
              <span class="register" @click="useragreementBtn">用户协议</span
              >》、 《<span class="register" @click="privacypolicyBtn"
                >隐私政策</span
              >》
              <view>
                <span>及</span>
                《<span class="register" @click="goAuth">数字证书使用协议</span
                >》
              </view>
            </view>
          </u-checkbox>
        </u-checkbox-group>
      </view>
    </view>

    <u-modal
      v-model="show"
      :width="'600'"
      :show-title="false"
      :showConfirmButton="false"
    >
      <view>
        <view style="font-weight: bold; padding: 10rpx 0 0 20rpx"
          >系统提示</view
        >
        <image
          src="https://minio.wskjwl.com/uipicture/bell.png"
          style="width: 100rpx; height: 120rpx; margin-left: 40%"
        />
        <view class="u-update-content">{{ content }}</view>
        <view
          style="
            display: flex;
            justify-content: space-around;
            margin-bottom: 20rpx;
          "
        >
          <u-button
            type="primary"
            shape="circle"
            plain
            style="width: 35%"
            @click="cancel"
            >取 消
          </u-button>
          <u-button
            type="primary"
            shape="circle"
            style="width: 35%"
            @click="confirm"
            >确 认
          </u-button>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
import { identityTabBar } from 'common/tabbar.js'
export default {
  data() {
    return {
      customStyle: {
        'margin-left': '10rpx',
        width: '130rpx',
        'font-size': '24rpx',
      },
      getCodeDisabled: false,
      showCode: true,
      current: 0,
      listTop: [
        {
          name: '密码登录',
        },
        {
          name: '验证码登录',
        },
      ],
      form: {
        username: '',
        pwd: '',
        verificationCode: '',
      },
      form1: {},
      count: '',
      token: '',
      count: '',
      verifyCodeKey: '',
      verifyCodePic: '',
      isrememberpasw: false, //是否记住密码
      list: [
        {
          name: '记住密码',
          checked: false,
        },
      ],
      codeTitle: '获取验证码',
      isClickCode: false,
      timer: null,
      rules: {
        username: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          },
        ],
      },
      show: false,
      // 传递给uni-app"rich-text"组件的内容，可以使用"<br>"进行换行
      content: '',

      checkout1: false,
    }
    usermessage: {
    }
  },
  onLoad(options) {
    this.checkout1 = options.checkout
    if (options.form) {
      this.form1 = JSON.parse(options.form)
    }
    if (options.id) {
      uni.setStorageSync('accountId', decodeURIComponent(options.id))
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/userregistration',
        })
      }, 200)
    }
  },
  onShow() {
    //隐藏返回首页按钮
    // uni.hideHomeButton()
  },

  // onReady() {
  //   this.$refs.uForm.setRules(this.rules)
  // },

  mounted() {
    //页面加载完成，获取本地存储的手机号及密码
    let username = uni.getStorageSync('username')
    let password = uni.getStorageSync('password')

    if (username && password) {
      this.form.username = username
      this.form.pwd = password
    } else if (username) {
      this.form.username = username
      this.form.pwd = ''
    } else {
      this.form.username = ''
      this.form.pwd = ''
    }
    if (this.form1.username) {
      this.form = this.form1
    }
  },
  methods: {
    goAuth() {
      uni.navigateTo({ url: '/pages/login/auth-sign' })
    },
    //顶部切换
    classFc(val) {
      if (this.current == 0) {
        if (val == 0) {
          return 'active-tabs'
        } else {
          return 'default-tabs'
        }
      } else {
        if (val == 0) {
          return 'active-tabs-180'
        } else {
          return 'default-tabs-180'
        }
      }
    },
    change(index) {
      this.current = index
    },
    //获取验证码
    getCode() {
      if (this.form.username) {
        const intime = 60
        if (!this.timer) {
          this.count = intime
          this.showCode = false
          this.getCodeDisabled = true
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= intime) {
              this.count--
            } else {
              this.showCode = true
              this.getCodeDisabled = false
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
          this.getCodeData({
            type: '1',
            iphone: this.form.username,
          })
        }
      } else {
        this.$api.msg('请先输入手机号码')
      }
    },
    ...mapMutations(['login']),
    //忘记密码
    showForgotpassword() {
      uni.navigateTo({
        url: '/pages/login/forgotpassword',
      })
    },
    //注册
    showRegister() {
      uni.navigateTo({
        url: '/pages/login/userregistration',
      })
    },
    inputChange(e) {
      const key = e.currentTarget.dataset.key
      this[key] = e.detail.value
    },

    // 选中任一checkbox时，由checkbox-group触发
    checkboxChange(e) {
      if ((e.name = '记住密码')) {
        this.isrememberpasw = e.value
      }
    },
    //勾选隐私协议
    checkboxChange1() {
      this.checkout1 = true
    },
    //跳转用户协议
    useragreementBtn() {
      uni.navigateTo({
        url: '/pages/login/useragreement?form=' + JSON.stringify(this.form),
      })
    },
    //跳转隐私政策
    privacypolicyBtn() {
      uni.navigateTo({
        url: '/pages/login/privacypolicy?form=' + JSON.stringify(this.form),
      })
    },
    // 发送短信验证码
    async getCodeData(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/client/smsSend',
        val
      )
      if (code === '0') {
        this.$api.msg('短信验证已发送')
      } else {
        this.$api.msg(message)
      }
    },
    async submit() {
      var that = this
      if (this.checkout1) {
        uni.showLoading({
          title: '登录中...',
          mask: true,
        })
        if (this.form.username == '') {
          this.$api.msg('手机号不能为空')
          return
        }
        if (!this.$u.test.mobile(this.form.username)) {
          this.$api.msg('手机号不正确')
          return
        }
        if (this.form.pwd == '' && this.current == 0) {
          this.$api.msg('密码不能为空')
          return
        }
        //登录成功将手机号密码存储到用户本地
        if (this.current == 0) {
          const params = {
            password: this.form.pwd,
          }
          const { code, result, message } = await this.$u.get(
            '/freight-auth/userAccount/getPassword',
            params
          )
          if (code === '0') {
            this.submitLogin({
              username: this.form.username,
              password: result,
              grant_type: 'password',
            })
          } else {
            this.show = true
            this.content = message
            // this.$api.msg(message)
          }
        }
        if (this.current == 1) {
          const params = {
            phone: this.form.username,
            verificationCode: this.form.verificationCode,
          }
          const { code, result, message } = await this.$u.get(
            '/freight-auth/userAccount/getPwdByCode',
            params
          )
          if (code === '0') {
            this.submitLogin({
              username: this.form.username,
              password: result,
              grant_type: 'password',
            })
          } else {
            // this.show = true
            // this.content = message
            this.$api.msg(message)
          }
        }
      } else {
        this.$api.msg('请先勾选用户隐私协议')
      }
    },
    //真正的登录
    async submitLogin(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/oauth/token',
        {
          ...val,
          equipment: 'app',
        },
        {
          'content-type': 'application/x-www-form-urlencoded',
          Authorization: 'Basic YW5kcm9pZDphbmRyb2lk',
          equipment: 'app',
        }
      )
      if (code === '0') {
        if (result.additionalInformation.accountType != '3') {
          this.$api.msg('当前账号不存在')
        } else {
          uni.setStorageSync('userAccount', result.value)
          if (this.isrememberpasw) {
            //用户勾选“记住密码”
            uni.setStorageSync('username', this.form.username)
            uni.setStorageSync('password', this.form.pwd)
          } else {
            //用户没有勾选“记住密码”
            uni.setStorageSync('username', this.form.username)
          }
          this.$api.msg('登录成功')
          this.getloginUserlnfo()
        }
      } else {
        this.$api.msg(message)
      }
    },
    //获取当前登陆人信息
    async getloginUserlnfo() {
      const { code, result, message } = await this.$u.get(
        '/freight-business/get/userInfo'
      )
      if (code === '0') {
        this.$store.dispatch('getIdentity', result.userType)
        setTimeout(() => {
          identityTabBar(result.userType)
        }, 600)
        this.login(result)
      } else {
        this.$api.msg(message)
      }
    },
    //上报访问次数
    async addVistLog() {
      let mobile = {
        mobile: uni.getStorageSync('username'),
      }
      await this.$u.post('/freight-business/driverVisitLog/addLog', mobile)
    },

    cancel() {
      this.closeModal()
    },
    confirm() {
      // this.showRegister()
      this.closeModal()
    },
    closeModal() {
      uni.navigateBack()
    },
  },
}
</script>

<style lang="scss">
.login_wrap {
  width: 100%;
  height: 100vh;

  .login_text {
    padding: 0 50rpx;
    background: white;
    .login-logo {
      width: 240rpx;
      height: 60rpx;
      margin: 88rpx 0 0 0;
    }
    .listTop-box {
      display: flex;
      align-items: center;
      margin-top: 90rpx;
      margin-bottom: 88rpx;
      .item-box {
        width: 330rpx;
        height: 120rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        font-size: 36rpx;
        line-height: 120rpx;
        text-align: center;
      }
      .default-tabs {
        color: #2979ff;
        background-image: url('./../../static/login/tabs_right.png');
      }
      .active-tabs {
        color: #fff;
        background-image: url('./../../static/login/tabs_left.png');
      }
      .default-tabs-180 {
        color: #fff;
        position: relative;
        top: 0;
        left: 0;
        background-image: url('./../../static/login/tabs_left.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform: rotate(180deg);
        view {
          transform: rotate(-180deg);
        }
      }
      .active-tabs-180 {
        color: #2979ff;
        position: relative;
        top: 0;
        left: 0;
        background-image: url('./../../static/login/tabs_right.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        transform: rotate(180deg);
        view {
          transform: rotate(-180deg);
        }
      }
    }
    .login_text_top {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: -44rpx;
      margin-bottom: 56rpx;
      image {
        width: 60rpx;
        height: 4rpx;
      }
      .title-box {
        white-space: nowrap;
        color: #4594ff;
        font-size: 36rpx;
        margin: 0 20rpx;
        display: flex;
        align-items: center;
        .top-image {
          width: 44rpx;
          height: 50rpx;
          margin-right: 10rpx;
        }
      }
    }
    .user {
      height: 82rpx;
      width: 100%;
      padding: 0 10rpx 0 10rpx;
      border: 2rpx solid #dee0e2;
      /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
      border-radius: 10rpx;
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .svg-icon {
        width: 35rpx;
        height: 39rpx;
        margin: 0 18rpx 0 20rpx;
      }
      text {
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 64rpx;
      }

      .user_name {
        color: rgba(153, 153, 153, 1);
        height: 54rpx;
        line-height: 78rpx;
      }
    }

    .user_pwd {
      height: 82rpx;
      width: 100%;
      padding: 0 10rpx 0 10rpx;
      border: 2rpx solid #dee0e2;
      /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      margin-bottom: 32rpx;
      .svg-icon {
        width: 35rpx;
        height: 39rpx;
        margin: 0 18rpx 0 20rpx;
      }
      text {
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 64rpx;
      }

      .pwd {
        color: rgba(153, 153, 153, 1);
        line-height: 78rpx;
        height: 54rpx;
      }
    }
    .row-box {
      display: flex;
      border: 2rpx solid #dee0e2;
      border-radius: 10rpx;
      height: 82rpx;
      margin-bottom: 100rpx;
      .user_pwd {
        height: 100%;
        width: 100%;
        padding: 0 10rpx 0 10rpx;
        border: none;
        /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-bottom: 32rpx;
        image {
          width: 35rpx;
          height: 39rpx;
          margin: 0 18rpx 0 20rpx;
        }
        text {
          font-weight: 400;
          color: rgba(51, 51, 51, 1);
          line-height: 64rpx;
        }

        .pwd {
          color: rgba(153, 153, 153, 1);
          line-height: 78rpx;
          height: 54rpx;
        }
      }
      .register {
        display: flex;
        white-space: nowrap;
        align-items: center;
        margin-right: 20rpx;
      }
    }
    .user_code {
      height: 78rpx;
      width: 100%;
      padding: 0 0 0 10rpx;
      background: rgba(69, 148, 255, 0.1);
      border: 2rpx solid rgba(242, 242, 242, 1);
      // box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35);
      border-radius: 32rpx;
      text {
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 74rpx;
      }

      .code {
        background-color: #c6dde9;
        width: 181rpx;
        height: 58rpx;
        font-size: 28rpx;
        text-align: center;
        line-height: 58rpx;
        color: rgba(153, 153, 153, 1);
        position: relative;
        left: 420rpx;
        top: -60rpx;
        border: none !important;
        z-index: 100;
        margin: 0;
      }
      .see {
        background-color: #c6dde9;
        width: 181rpx;
        height: 58rpx;
        font-size: 28rpx;
        text-align: right;
        line-height: 58rpx;
        color: wheat;
        position: relative;
        left: 420rpx;
        top: -60rpx;
        border: none !important;
        z-index: 100;
      }
    }

    .forget {
      text-align: right;
      font-weight: 400;
      color: rgba(3, 158, 225, 1);
      line-height: 120rpx;
      font-size: 24rpx;
    }
    .checkbox-big-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      /deep/.u-checkbox__label {
        font-size: 28rpx;
        color: rgba(0, 0, 0, 0.4);
        margin-right: 0;
      }
    }
    .register {
      color: #2e87fe;
    }
    .login_btn_wrap {
      margin-top: 20rpx;
      .login_btn {
        margin-bottom: 40rpx;
        background: #2979ff;
        color: white;
        border-radius: 10rpx;
        height: 92rpx;
        font-size: 32rpx;
      }
      .register {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
  .checkout1-big-box {
    margin-top: 50rpx;
  }
  .checkout1-box {
    color: rgba(0, 0, 0, 0.4);
    font-size: 24rpx;
  }
  .u-update-content {
    text-align: center;
    padding: 32rpx;
  }
}
</style>
